<template>
  <div>
    <van-checkbox-group v-model="result" :disabled="isEditing">

      <van-checkbox :name="cart.skuId" v-for="cart in cartList" :key="cart.skuId" @click="changeChecked(cart)">
        <van-swipe-cell>
          <van-card :num="cart.skuNum" :price="cart.skuPrice" desc="描述信息1" :title="cart.skuName" :thumb="cart.imgUrl" />
          <van-stepper v-model="cart.skuNum" v-show="isEditing" @change="stepper(cart)" />
          <template #right>
            <van-button square type="danger" text="删除" @click="deleteCart(cart)" />

          </template>
        </van-swipe-cell>
      </van-checkbox>

    </van-checkbox-group>


    <van-submit-bar :price="totalPrice * 100" button-text="支付" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" @click="changeFnAll" :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共<span>{{ checkCount }}</span>件商品,可点击
        <van-button :type="isEditing ? 'danger' : 'primary'" size="small" @click="editBtn">
          {{ isEditing ? '完成编辑' : '编辑' }}
        </van-button> 按钮进行商品数量的修改
      </template>
    </van-submit-bar>




  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from "vue";
import { Toast } from "vant";
import api from '@/api/cart'
import { useRouter } from 'vue-router';
// import axios from 'axios'


//路由
const router = useRouter()

//展示选中元素的数组
const result = ref<any>([]);
// console.log('选中元素的数组',result)

const productIdArr = ref<any>([])//所有选中的skuId

//控制步进器的显示
const isEditing = ref(false)
//点击编辑控制步进器显示隐藏
const editBtn = () => {
  isEditing.value = !isEditing.value
}
//修改商品数量

const stepper = async (item: any) => {
  let { skuId, skuNum } = item
  try {
    let results = await api.reqAddCart(skuId, skuNum)
    // console.log('修改步进器',results)
    alert('修改商品数量成功')
    //重新获取数据,更新页面信息//因为现在是模拟的数据,样式改了数据还没改
    cartLists()
  } catch (error) {
    console.log('shibai', error)
  }

}

//全选的控制
// const checkedAll = ref(false);

//购物车列表数据
const cartList = ref<any>([])
// console.log('购物车列表数据',cartList)

// @submit="onSubmit"
// const onSubmit = () => Toast("点击按钮");
// const onClickLink = () => Toast('修改地址');

//计算已选商品个数 //商品数量 * 选中状态
const checkCount = computed(() => {
  return (cartList.value || []).reduce((prev: number, item: any) => {
    return prev + item.skuNum * item.isChecked
  }, 0)
})

// console.log('计算已选商品个数',checkCount)
//计算总价
const totalPrice = computed(() => {
  return (cartList.value || []).reduce((prev: number, item: any) => {
    return prev + item.skuNum * item.skuPrice * item.isChecked
  }, 0)
})
// console.log('总价',totalPrice)

//全选的控制
const checkedAll = computed({
  get() { //反选
    return result.value.length == cartList.value.length && result.value.length != 0
  },
  set(val) { //全选
    // console.log('set',val)
    if (val == true) {
      result.value = cartList.value.map((item: any) => item.skuId)
    } else {//取消全选
      result.value = []
    }

  }
})

//切换商品选中状态
const changeChecked = async (goods: any) => {
  if (isEditing.value) {
    return
  }
  console.log('cart', goods)
  let { skuId, isChecked } = goods
  if (isChecked == 1) {
    isChecked == 0
  } else {
    isChecked == 1
  }
  const results = await api.reqCheckCart(skuId, isChecked)
  // console.log('切换商品选中状态',results)
  alert('修改商品选中状态成功')

  //重新获取数据,更新页面信息//因为现在是模拟的数据,样式改了数据还没改
  cartLists()

}

//全选
const changeFnAll = async () => {
  //所有被选中商品的skuId，定义是为了好传参
  productIdArr.value = []
  result.value.forEach((item: any) => {
    productIdArr.value.push(item)
  })
  // console.log("所有被选中商品的skuId", productIdArr.value);
  try {
    let isChecked = checkedAll.value ? 1 : 0;
    let skuIdList = productIdArr.value
    let results = await api.reqBatchCheckCart(isChecked, skuIdList)
    alert('修改成功')
    // console.log('1111111111111111111111111111111111',results)
    //重新获取数据,更新页面信息 //因为现在是模拟的数据,样式改了数据还没改
    cartLists()
  } catch (error) {
    console.log('接口全选失败', error)
  }
}

//删除
const deleteCart = async (cart: any) => {
  try {
    let results = await api.reqDeleteCart(cart.skuId)
    // console.log('删除成功',results)
    alert('删除商品成功')
    //重新获取数据,更新页面信息 //因为现在是模拟的数据,样式改了数据还没改
    cartLists()
  } catch (error) {
    console.log('删除接口失败', error)
  }

}

//跳转支付页
const onSubmit = () => {
  // router.push('/')

  alert('支付成功')
}


const cartLists = async () => {
  try {
    let result = await api.reqCartList()
    // console.log('购物车数据',result)
    cartList.value = result.data
    cartList.value.forEach((item: { isChecked: number; skuId: any; }) => {
      if (item.isChecked == 1) {  //如果商品是被选中的状态，就推入选中商品数组
        (result.value || []).push(item.skuId)

      }
    })
  } catch (error) {
    console.log('错误');

  }
}

//获取购物车数据
// const cartLists = async () =>{
//   try {
//     let result = await api.reqCartList()
//     // console.log('购物车数据',result)
//     cartList.value = result.data
//       cartList.value.forEach((item: { isChecked: number; skuId: any; }) => {
//        if (item.isChecked == 1) {  //如果商品是被选中的状态，就推入选中商品数组
//         (result.value || []).push(item.skuId)

//           }
//        })
//   } catch (error) {
//     console.log('错误');
    
//   }
// }

//获取购物车数据
const mockList = async () =>{
  try {
    let results = await api.getCartList()
    // console.log('请求回来的数据',result)
    cartList.value = results.data[0].cartInfoList
    // console.log('mock',cartList);
      cartList.value.forEach((item: { isChecked: number; skuId: any; }) => {
       if (item.isChecked == 1) {  //如果商品是被选中的状态，就推入选中商品数组
        (result.value || []).push(item.skuId)
                        
          }
       })
  } catch (error) {
    console.log('请求数据失败',error)
  }
}
onMounted(() => {
  // cartLists()
  mockList()
})

</script>

<style lang="less" scoped>
/deep/.van-checkbox__label {
  flex: 1;

}

.van-card {
  border-radius: 10px;
}

.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 3rem;

  .van-checkbox {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid #ccc;
  }
}

.van-submit-bar {
  bottom: 1.5rem;
  background-color: #fafafa;
  border-bottom: 1px solid #ccc;

}

.van-stepper {
  // position: absolute;
  float: right;
  // z-index: 10;

  // right: 10px;
}

.van-button--square {
  height: 100%;
}



// .cart-tool {
//     overflow: hidden;
//     border: 1px solid #ddd;
//     // position: fixed;
//     // left: 0;
//     // display: flex;
//     // margin-top: 100%;
//     // width: 100%;
//     // position:fixed;

//     position: fixed;
//     left: 0;
//     /* bottom: 0; */
//     z-index: 5;
//     display: -webkit-flex;
//     display: -ms-flexbox;
//     display: flex;
//     -webkit-align-items: center;
//     -ms-flex-align: center;
//     align-items: center;
//     width: 100%;
//     // height: 2.51733rem;
//     background: #fafafa;
//     margin-top: 30vh;



//     .select-all {
//       padding: 10px;
//       overflow: hidden;
//       float: left;

//       span {
//         vertical-align: middle;
//       }

//       input {
//         vertical-align: middle;
//       }
//     }

//     .option {
//       padding: 10px;
//       overflow: hidden;
//       float: left;

//       a {
//         float: left;
//         padding: 0 10px;
//         color: #666;
//       }
//     }

//     .money-box {
//       float: right;

//       .chosed {
//         line-height: 26px;
//         float: left;
//         padding: 0 10px;
//       }

//       .sumprice {
//         width: 200px;
//         line-height: 22px;
//         float: left;
//         padding: 0 10px;

//         .summoney {
//           color: #c81623;
//           font-size: 16px;
//         }
//       }


//       .sumbtn {
//         float: right;
//         a {
//           display: block;
//           position: relative;
//           width: 96px;
//           height: 52px;
//           line-height: 52px;
//           color: #fff;
//           text-align: center;
//           font-size: 18px;
//           font-family: "Microsoft YaHei";
//           background: #e1251b;
//           overflow: hidden;
// 					text-decoration: none;
// 					&hover {
// 						color: white !important;
// 					}
//         }
//       }
//     }
//   }
</style>
